<template>
 <view class="main">
   <view class="logo">
	 <view class="ilist" @click="myitem">
		<view class="ilist1"></view> 
		<view class="ilist2"></view> 
	 </view>
	 <image src="https://ppp.new.zeroitem.cn/ppp/logo.png" class="img1" style="width:148rpx;height:64rpx"></image>   
   </view>
   <view class="menu">
	 <view class="menu-1" @click="jumpmenu(1)"> <view class="dot"></view>一键下单</view>
	 <view class="menu-1" @click="jumpmenu(2)">约拍同款</view>
	 <view class="menu-1 cur">定制悬赏</view> 
	 <view class="menu-1" @click="jumpmenu(4)">当前订单</view> 
   </view>
   <view class="part1">
	  <view class="part1-1 flex_comm">
		<view class="tip1"></view> 悬赏标题
	  </view> 
       <input type="text" placeholder="15字以内" class="part1-2 flex_comm" confirm-type="next" @confirm="doSearch" v-model="xtitle" @blur="mpm()"/>
	   <view class="part1-3 flex_comm">
	      <image src="https://ppp.new.zeroitem.cn/ppp/xx2.png" class="img1"></image>
		  <image src="https://ppp.new.zeroitem.cn/ppp/xx1.png" class="img2"></image>
		  <image src="https://ppp.new.zeroitem.cn/ppp/xx4.png" class="img3"></image>
		  <image src="https://ppp.new.zeroitem.cn/ppp/xx1.png" class="img4"></image>
	      <image src="https://ppp.new.zeroitem.cn/ppp/xx3.png" class="img5"></image>
		  <image src="https://ppp.new.zeroitem.cn/ppp/xx1.png" class="img61"></image>
		  <image src="https://ppp.new.zeroitem.cn/ppp/xs.png" class="img7"></image>
	   </view>
	   <view class="part1-4 flex_comm">
		   <view class="p4-txt">日期时长</view>
		   <view class="p4-txt wtxt1" @click="lxxx">联系信息</view>
		   <view class="p4-txt wtxt2" @click="xqjj">需求简介</view>
		   <view class="p4-txt wtxt3">发布悬赏</view>
	   </view>
   </view>
   <view class="xzal">悬赏案例</view>
    <swiper class="swiper" next-margin="314rpx">
      <swiper-item v-for="(item,index) of anp">
        <view class="witem">
		  <view class="witem1"  @click="xsdetail(item.id)">【悬赏{{item.total_price}}￥】</view>
		  <view class="witem2"  @click="xsdetail(item.id)">{{item.pdate}}</view>
		  <view class="witem3"  @click="xsdetail(item.id)">{{item.ptime}}</view>
		  <view class="witem4"  @click="xsdetail(item.id)">{{item.remark}}</view>
		  <view class="witem5"  @click="xsdetail(item.id)">{{item.str}}</view>
		  <view class="witem6"  @click="xsdetail(item.id)">查看更多</view>
		  <view class="witem7"  @click="xsdetail(item.id)">
		  <image src="https://ppp.new.zeroitem.cn/ppp/jt.png" class="jtimg"></image>
		  </view>
		  <video :src="item.video" class="faimg"></video>
		</view>
      </swiper-item>
	  
     </swiper> 
	
	<view class="qrbtn">
	 <image src="https://ppp.new.zeroitem.cn/ppp/car2.png" class="carimg"></image>
     <view class="qtxt" @click="doSearch()">发布悬赏</view>
	</view>   

   <view class="newitem" style="margin-top:20rpx">
	  <view class="new1">
	   <view class="new1-1">拍片片合约1.0</view>	 
	   <view class="new1-2">新约拍规则上线了！遵守公约，相约拍摄</view>	 
	 </view>  
	 <image src="https://ppp.new.zeroitem.cn/ppp/pic1.png" class="fimg7"></image>
  </view>
  
 <view class="newitem">
 	  <view class="new1">
 	   <view class="new1-1">设备信息详情</view>	 
 	   <view class="new1-2">片拍拍平台 设备信息公示</view>	 
 	 </view>  
	  <image src="https://ppp.new.zeroitem.cn/ppp/pic2.png" class="fimg7"></image>
 </view> 

<view class="mask" v-if="showtc==1">
  <view class="tc1">
	<view class="tc1-1 flex_comm">
	   <view class="tp1" :class="[{'sel1':cur1 == 1}]" @click="showtab(1)"> 
		 <image src="https://ppp.new.zeroitem.cn/ppp/cat.png" class="cimg" v-if="cur1==0"></image>
		 <image src="https://ppp.new.zeroitem.cn/ppp/cat_cur.png" class="cimg" v-if="cur1==1"></image>
		  <view :class="[{'txt22':cur1 == 0},{'txt23':cur1 == 1}]">分类</view>
	   </view>  
	   <view class="tp1" :class="[{'sel1':cur2 == 1}]" @click="showtab(2)">
		 <image src="https://ppp.new.zeroitem.cn/ppp/sm.png" class="simg" v-if="cur2==0"></image> 
		 <image src="https://ppp.new.zeroitem.cn/ppp/sm_cur.png" class="simg" v-if="cur2==1"></image> 
		  <view :class="[{'txt22':cur2 == 0},{'txt23':cur2 == 1}]">需求说明</view>
	   </view> 	   
	   <view class="tp1" :class="[{'sel1':cur3 == 1}]" @click="showtab(3)">
		 <image src="https://ppp.new.zeroitem.cn/ppp/cp.png" class="cpimg"  v-if="cur3==0"></image> 
		 <image src="https://ppp.new.zeroitem.cn/ppp/cp_cur.png" class="cpimg"  v-if="cur3==1"></image> 
		  <view :class="[{'txt22':cur3 == 0},{'txt23':cur3 == 1}]">参考片</view>
	   </view> 	   
	   
	</view>  
	<view class="tc1-2 flex_comm" v-if="cur1==1">
	   <view class="tcitem" @click="appointment(i)" :class="{ tcur: sitem.indexOf(i) != -1 }" v-for="(item,i) of pitem" :key="i">{{item.val}}</view>
		<view class="btn1" @click="showtab(2)">下一步</view>		 
	</view>
	  <block v-if="cur2==1">
      <textarea class="tc1-3"  placeholder="请输入拍摄要求（300字以内）" v-model="remark">
	  </textarea> 
	  <view class="btn1" @click="showtab(3)">下一步</view>
	  </block>
	  <block v-if="cur3==1">
		<view class="line3"></view>
        <view class="slice1">
           <view class="slice1-1" @click="show_slice_type(1)">
        	  <view class="dot1" v-if="slice_type==1"></view> 
        	  <image src="https://ppp.new.zeroitem.cn/ppp/icon1.png" class="img12"></image>
        	  <view class="slice-1-txt">网络链接</view>
           </view>
           <view class="slice1-1" style="margin-left:68rpx" @click="show_slice_type(2)">
        	 <view class="dot1" v-if="slice_type==2"></view>
        	 <image src="https://ppp.new.zeroitem.cn/ppp/icon2.png" class="img12"></image>
        	 <view class="slice-1-txt">本地上传</view>
           </view>
        </view>
		
	   <block v-if="slice_type==1">
		 <view class="sinput">
		  <input type="text" placeholder="请粘体链接地址"  class="sinput1" v-model="plink"></input>
		 </view>	
		</block>	
	<block v-if="slice_type==2 && vname==''">
	 <view class="sinput" @click="uploadvideo">
	  <input type="text" placeholder="选择相册文件"  class="sinput2" ></input>
	 </view>	
	</block>	
	<block v-if="slice_type==2 && vname!=''">
	 <view class="sinput3" @click="uploadvideo">
	   <view class="sinput3-1">{{vname}}</view>
	   <view class="sinput3-2">
		 <view class="cir">100%</view>   
	   </view>
	 </view>	
	</block>	
	
	
	<view class="btn1 btn3" @click="submitorder()">确认提交</view>	
		
	  </block>	
	
	
  </view>
</view>
	   
 </view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		toLogin
	} from '@/utils/login'
	
	import {
		loadingFun,
		menuJump
	} from '@/utils/tools'	
	
	import {
		loadingType
	} from '@/utils/type'
	import {
	  plable,submitorder1,xsal
	} from '@/api/ppp'	
	import {
	  uploadFileToTencentClound
	} from '@/js_sdk/COS'
	const app = getApp()
	export default {
	    data() {
	        return {
             cur1:1,
			 xtitle:"",
			 cur2:0,
			 cur3:0,
			 slice_type:0,
			 showtc:0,
			 remark:"",
			 pdate:"",
			 address:"",
			 jtdz:"",
			 xm:"",
			 phone:"",
			 timep:"",
			 stime1:"",
			 stime2:"",
			 latitude:"",
			 longitude:"",
			 pitem:[],
			 sitem:[],
			 vname:"",
			 wfile:"",
			 ckjg:0,
			 anp:[],
	        }
	    },
		onShow(){
            
		},
		onLoad(){
		 this.showpitem();
		 this.getxsal();
		},
	    methods: {
		myitem(){
		 uni.navigateTo({
		 	url:"/pages/ppp/my/index"
		 })	
		},
		xsdetail(oid){
		 uni.redirectTo({
		 	url:"/pages/ppp/index/orderConfire?cha=1&oid="+oid
		 })		
		},
		otherFun(object) {
			this.xm = object.xm;
			this.phone = object.phone;
		    this.pdate = object.pdate;
		    this.address = object.address;
			this.jtdz = object.jtdz;
			this.xm = object.xm;
			this.timep = object.timep;
		    this.stime1 = object.stime1;
			this.stime2 = object.stime2;
			this.latitude = object.latitude;
			this.longitude = object.longitude;
			this.ckjg=object.ckjg;
			this.showtc=1;
	     },
		 doSearch(){
	      uni.navigateTo({
	      	url:"/pages/ppp/index/place"  
	      })	 
		 },
		 mpm(){
		  var xtitle=this.xtitle;
		  if(xtitle!=''){
			uni.navigateTo({
				url:"/pages/ppp/index/place"  
			})  
		  }
		 },
		 async showpitem(){
		   const{
		    code,
		    msg,
		    data
		   }= await plable();
		   if(code==1){
		   	this.pitem=data;
		   }	 
		 },
		 async getxsal(){
		   const{
		    code,
		    msg,
		    data
		   }= await xsal();
		   if(code==1){
		   	this.anp=data;
		   }	 
		 },
		 appointment(index) {
		    let that = this;
		    if (that.sitem.indexOf(index) == -1) {
		      that.sitem.push(index);
		     }else{
		 			that.sitem.splice(that.sitem.indexOf(index), 1);
		     }
		 },
	    show_slice_type(type){this.slice_type=type;},
		jumpmenu(kn){
		if(kn==1){
		  uni.redirectTo({
			 url:"/pages/ppp/index/order"
		  })
		 }	
		 if(kn==2){
		   uni.redirectTo({
		 	 url:"/pages/ppp/index/drps"
		   })
		  }	
		 if(kn==3){
		   uni.redirectTo({
		 	 url:"/pages/ppp/index/dzxx"
		   })
		  }	
		 if(kn==4){
		   uni.redirectTo({
		 	 url:"/pages/ppp/index/dqdd"
		   })
		  }					
		  
		},
      uploadvideo(){
      			 var that=this;
      			uni.chooseVideo({
      				sourceType: ['camera', 'album'],
      				success: function (res) {
      				  let filePath = res.tempFilePath;
      				  let ext = filePath.substr(filePath.lastIndexOf('.') + 1);
      				  var timestamp = (new Date()).valueOf();
      				  var filename=timestamp+"."+ext;
      				  uni.showLoading({title:"视频上传中",mask:true});
      				  uploadFileToTencentClound(filename,filePath).then((res1)=>{
      				  	that.vname=filename;
      					that.wfile="文件:"+filename;
      					uni.hideLoading();
      				  })
      				 }
        });  
      },

		 async submitorder(){
			  if (!this.isLogin) return toLogin();
			  var pdate=this.pdate;
			  var sitem=this.sitem;
			  var pitem=this.pitem;
			  if(pdate=='拍摄日期'){
				uni.showToast({title:"请选择拍摄日期",icon:"none"});
				return false;  
			  }
			  var address=this.address;
			  if(address==''){
				uni.showToast({title:"请定位选择拍摄地址",icon:"none"});
				return false;  
			  }	
			  var xm=this.xm;
			  if(xm==''){
				uni.showToast({title:"请填写联系人",icon:"none"});
				return false;    
			  }
			  var phone=this.phone;
			  if(phone==''){
			  	uni.showToast({title:"请填写联系电话",icon:"none"});
			  	return false;    
			  }
			   if(this.tmode!=4 && this.timep==0){
				 uni.showToast({title:"请选择拍摄时长",icon:"none"});
				 return false;
			   }
			   if(this.tmode==4 && (this.stime1=='' || this.stime2=='')){
				uni.showToast({title:"请填写完整自定义的拍摄时长",icon:"none"});
				return false;   
			   }
			   if(sitem.length==0){
			    uni.showToast({title:"请选择分类标签",icon:"none"});
			    return false;	 
			   }
			   var imp=[];
				 for(var kz=0;kz<sitem.length;kz++){
				   imp[kz]=pitem[sitem[kz]]['id']-1;	
				 }
			    var impstr=imp.join("|")
			   var odata={
				 pdate:pdate,address:address,
				 jtdz:this.jtdz,xm:xm,phone:phone,
				 timep:this.timep,stime1:this.stime1,
				 stime2:this.stime2,total_price:this.ckjg,
				 lat:this.latitude,lng:this.longitude,
				 remark:this.remark,plink:this.plink,
				 slice_type:this.slice_type,vname:this.vname,
				 sitem:impstr
			   };
			  const{
				code,
				msg,
				data,
			  }= await submitorder1(odata);
			  if(code==1){
				uni.navigateTo({
					url:"/pages/ppp/index/orderConfire?oid="+data.id
				})  
			  }
		}, 

		 xqjj(){
		  this.showtc=1; 
		 },
		 closetc(){
			this.showtc=0; 
		 },
		 showtab(type){
		  if(type==1){
			this.cur1=1;
			this.cur2=0;
			this.cur3=0;
		  }	
		  if(type==2){
			this.cur1=0;
			this.cur2=1;
			this.cur3=0;
		  }			   
	     if(type==3){
			this.cur1=0;
			this.cur2=0;
			this.cur3=1;
	      }		    
		 },
		 lxxx(){
		  uni.navigateTo({
			url:"/pages/ppp/index/place"  
		  })	 
		 },
		 sliderChange(e){
		  var value=e.detail.value;
		  var m1=value*20;
		  this.dt=m1;
		  this.nd=value;
		 }
	    }
	}
</script>
<style>
@import "./dzxx.css";	
</style>


